<template>
    <a-table :columns="column" :data-source="tableData" :pagination="pagination" @change="handlePageChange" :scroll="{ x: 500,y: (y || 600) }" style="margin-top: 10px;">
        <template #headerCell="{ column }">
            {{ column.title }}
        </template>
        <template #bodyCell="{ column, record, index }">
            <slot :name="column.dataIndex" :column="column" :record="record" :index="index">
                <template v-if="column.dataIndex !== 'operate'">
                    <span v-if="column.key == 'time'">
                        {{ record[column.dataIndex] ? $Date(record[column.dataIndex]) : '--' }}
                    </span>
                    <span v-else>
                        {{ record[column.dataIndex] ? record[column.dataIndex] : '--' }}
                    </span>
                </template>
                <template v-else>
                    {{ record[column.dataIndex] ? record[column.dataIndex] : '' }}
                </template>
            </slot>
        </template>
    </a-table>
</template>
<script lang="ts" setup>
const prop = defineProps(['column', 'tableData', 'total', 'y'])
const emits = defineEmits(['search'])
import { $Date } from '@/tool/function';
import { reactive, watch } from 'vue'
const pagination = reactive({
    total: prop.total,
    pageSize: 10,
    current: 1,
    size: 'small',
    showTotal: () => `共${prop.total}條記錄`,
    showSizeChanger: true,
})

// 这个类型应该参考组件库提供的分页类型
const handlePageChange = (e: any) => {
    pagination.current = e.current
    pagination.pageSize = e.pageSize
    emits('search', pagination)
}
watch(() => prop.total, (val) => {
    pagination.total = val
})
</script>

<style lang="less">
    .ant-table-thead th {
        width: auto;
        min-width: 150px;
    }
</style>
